<template>
	<view class="goddess">
		<view class="goods-head" :style="'background:rgba(255,255,255,' + PageScrollTop / 100 + ')'">
		  <back :page-scroll-top="PageScrollTop"/>
		</view>
		<image :src="item" class="image" v-for="(item,index) in imgList" :key="index" mode="widthFix"></image>
	</view>
</template>

<script>
import back from "@/components/headback/back.vue";
	export default {
	  components: {
		back,
	  },
		data(){
			return {
				PageScrollTop:0,
				imgList:[
					'../../static/goods-img/content-1.jpg',
					'../../static/goods-img/content-2.jpg',
					'../../static/goods-img/content-3.jpg'
				]
			}
		},
		onPageScroll(e) {
			this.PageScrollTop = e.scrollTop;
		},
	}
</script>

<style lang="scss">
	.goddess{
		padding:0;
		margin:0;
		.image{
			width: 100%;
			height: auto;
		}
	}
	.goods-head{
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100rpx;
		background:rgba(255,255,255,0);
		/* #ifdef APP-PLUS */
		height: calc(100rpx + var(--status-bar-height));
		/* #endif */
		/* #ifdef MP */
		height: 200rpx;
		/* #endif */
		.back{
			position: absolute;
			left: 0;
			top: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 120rpx;
			height: 100%;
			/* #ifdef APP-PLUS */
			padding-top: 50rpx;
			/* #endif */
			/* #ifdef MP */
			padding-top: 100rpx;
			/* #endif */
			// 返回
			.back-one{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 50rpx;
				height: 50rpx;
				background-color: rgba(0,0,0,0.3);
				border-radius: 100%;
				text{
					display: flex;
					width: 20rpx;
					height: 20rpx;
					border-left: 2rpx solid #FFFFFF;
					border-bottom: 2rpx solid #FFFFFF;
					transform: rotate(45deg);
				}
			}
			.action{
				background-color: transparent;
				text{
					border-color: #555555;
				}
			}
		}
	}
</style>